<template>
  <div id="app">
    <!-- 左侧导航栏 -->
    <leftNav class="leftNav"></leftNav>
    <!-- 上方导航栏 -->
    <statusBarVue></statusBarVue>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xihuan1"></use>
    </svg>
    <!-- 右侧主题内容盒子,左侧导航栏切换的不同路由来渲染不同内容· -->
    <router-view class="body"></router-view>
    <!-- “创建歌单”对话框 -->
    <el-dialog title="创建歌单" :visible.sync="this.$store.state.createList" width="30%" :before-close="handleClose">
      <!-- 文本块 -->
      <el-input style="resize: none;" placeholder="请输入歌单名称" v-model="textarea" show-word-limit maxlength="20" autosize
        clearable>
      </el-input>
      <!--  -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$store.commit('createList', false); createList()">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import iconfont from "../iconfont"; //引入文字图标文件
import bodyVue from "./views/musicHall/musicHall.vue";
import leftNav from "./views/leftNav.vue";
import statusBarVue from "./views/statusBar.vue";
import myCollect from "./views/myCollcect/myCollect.vue";
import drawer from "@/components/drawer/drawer.vue";
import { url } from "@/apiUrl"; //引入地址
export default {
  components: {
    leftNav,
    bodyVue,
    statusBarVue,
    myCollect,
    drawer,
  },
  created() {

  },
  data() {
    return {
      textarea: ''
    }
  },
  methods: {
    handleClose(done) {
      this.$store.state.createList = false
    },
    createList() {
      if (this.textarea != '') {
        this.$axios.post(`${url}/users/createPL`, {
          user_id:localStorage["qtUserId"],
          createPL_name:this.textarea
        },{
    headers: {
      'Authorization': localStorage['qtUser']
    }
}).then((res) => {
          if (res.status == 200) {
            console.log(res.code);
            console.log(`${url}/users/createPL`);
            console.log("id",localStorage["qtUserId"]);
            console.log("name",this.textarea);
            this.$store.commit("getCreatePL")//更新创建的歌单数组
            this.$notify({
              title: `歌单创建成功`,
              type: `success`,
              customClass: `success`,
              showClose: false,
              offset: 100
            })
            this.textarea = ''
          }
        })
      } else {
        this.$notify({
          title: `歌单创建失败`,
          message: `名称不能为空`,
          type: `error`,
          customClass: `success`,
          showClose: false,
          offset: 100
        })
      }
    }
  },
  mounted() {
    this.$axios
      .get(`${url}/musics/musicList`, {
      })
      .then((res) => {
        this.$store.commit("getMusics", res.data.data)//触发commit，初始化数据
        this.$store.commit("getList", res.data.data)
        this.$store.commit("getSong", {
          title: "让生活充满音乐",
          author: "轻听音乐",
          url: `${url}/musics/music_191857626.mp3`,
          pic: `${url}/images/image_1405283464.jpg`,
          lrc: "[00:00.00]作词： P.S.Y.潘紫棋\n[00:01.00] 作曲 : P.S.Y.潘紫棋\n",
        })
      });
    //获取所有歌单
    this.$axios
      .get(`${url}/musics/getPlaylistAll`, {})
      .then((res) => {
        this.$store.commit("getmusicList", res.data.data)
      });
    //获取用户所有信息
    if (localStorage.getItem("qtUser")){
      this.$axios.post(`${url}/users/getUserData`, { t: localStorage.getItem("qtUser") })
        .then((res) => {
         this.$store.commit("getCollectPLs",res.data.data.CollectPL)
        }).catch(err => { console.log(err.message) })
    }
    this.$router.push("musicList").catch(() => { })
    setTimeout(() => {
      this.$router.push("musicHall").catch(() => { })
    }, 500);
    if (localStorage["qtUser"] != undefined) {
        this.$store.commit("getCreatePL")
        this.$store.commit("getCollectPL")
      }
  }
}
</script>
<style lang="scss">
/* 阿里巴巴图标库icon通用样式代码 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.el-menu {
  user-select: none;
}

.success {
  background-color: red;
}

.body {
  margin: -1rem 3rem 2rem 20rem;
  // border: 1px solid black;

  /*设置body容器里的.slide*/
  .slide {
    margin: 1rem 0 2rem 0;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
  }
}

html {
  font-size: 10.5px;
}

* {
  margin: 0;
  padding: 0;
}
</style>
